<template>
    <div id="person">
        <div class="person-container align-center">
            <div class="person-content flex-between">
                
                <div class="person-menu" id="notclick" @click=" $router.replace({name:active,params:{user:user}})">
                    <div style="margin-left: 35px;display: flex;align-items: center;z-index: 999;">
                        <div @click="goback" style="width: 30px;height: 36px;position: relative;cursor: pointer;">
                            <img style="position: absolute;top: 9px;"  src="../../assets/img/cloud/toBack.png" alt="">
                        </div>
                        <span class="s-20" style="font-weight: bold;color: #303133;">个人中心</span>
                    </div>
                    <div :class="['menu-item',{'initial':$route.path==='/index/person/initial'},'pointer']"
                        @click="active='initial'">
                        <img v-if="active == 'initial' && $route.name !== 'space'" style="width: 20px;height: 16px;" src="../../assets/img/person/initial_01.png" alt="">
                        <img v-else style="width: 20px;height: 16px;" src="../../assets/img/person/initial.png" alt="">
                        <span class="pointer s-18">基础资料</span>
                    </div>
                    <div :class="['menu-item',{'space':$route.path==='/index/person/space'},'pointer']"
                        @click="active='space'">
                        <img v-if="active == 'space' || $route.name == 'space'" style="width: 20px;height: 20px;" src="../../assets/img/person/space_01.png" alt="">
                        <img v-else style="width: 20px;height: 20px;" src="../../assets/img/person/space.png" alt="">
                        <span class="pointer s-18">空间管理</span>
                    </div>
                    <div :class="['menu-item',{'s-setting':$route.path==='/index/person/setting'},'pointer']"
                        @click="active='setting'">
                        <img v-if="active == 'setting'" style="width: 20px;height: 18px;" src="../../assets/img/person/setting_01.png" alt="">
                        <img v-if="active != 'setting'" style="width: 20px;height: 18px;" src="../../assets/img/person/setting.png" alt="">
                        <span class="pointer s-18">系统设置</span>
                    </div>
                    <div :class="['menu-item',{'change':$route.path==='/index/person/change'},'pointer']"
                        @click="active='change'">
                        <img v-if="active == 'change'" style="width: 19px;height: 20px;" src="../../assets/img/person/change_01.png" alt="">
                        <img v-if="active != 'change'" style="width: 19px;height: 20px;" src="../../assets/img/person/change.png" alt="">
                        <span class="pointer s-18">修改密码</span>
                    </div>
                    <div v-if="eduLevel==='primary'"
                        :class="['menu-item',{'point':$route.path==='/index/person/point'},'pointer']"
                        @click="active='point'">
                        <img v-if="active == 'point'" style="width: 17px;height: 20px;" src="../../assets/img/person/point_01.png" alt="">
                        <img v-if="active != 'point'" style="width: 17px;height: 20px;" src="../../assets/img/person/point.png" alt="">
                        <span class="pointer s-18">积分商城</span>
                    </div>
                    <div :class="['menu-item',{'about':$route.path==='/index/person/about'},'pointer']"
                        @click="active='about'">
                        <img v-if="active == 'about'"  style="width: 20px;height: 20px;" src="../../assets/img/person/about_01.png" alt="">
                        <img v-if="active != 'about'"  style="width: 20px;height: 20px;" src="../../assets/img/person/about.png" alt="">
                        <span class="pointer s-18">关于我们</span>
                    </div>
                    <!-- <div :class="['menu-item',{'initial':$route.path==='/index/person/import'},'pointer']"
                        @click="active='import'" v-if="importIsShow">
                        <img src="../../assets/img/person/about.png" alt="">
                        <span class="pointer s-18">资源导入</span>
                    </div> -->
                </div>
                <div class="person-message ">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import User from '../../api/user'
import { SqlLibUser } from '../../../../../static/lib/sqlite/service/SqlLibUser'
import { SqlLib } from '../../../../../static/lib/sqlite/SqlLib'
import { DownloadCenter } from "../../../../../static/lib/downloader/DownloadCenter";
import { SqlLibBook } from '../../../../../static/lib/sqlite/service/SqlLibBook';
import { mapMutations } from 'vuex';
import bus from '../../assets/js/bus'
import { log } from 'console';
export default {
    name: "person",
    provide () {
        return {
            getuser: this.getuser,
            changeAuthorzation: this.changeAuthorzation
        }
    },
    data () {
        return {
            active: 'initial',
            userInfo: {},
            message: {},
            user: null,
            authorzation: false,
            importIsShow: false,
            eduLevel: window.eduLevel,
            isSpace:false,
        }
    },
    created(){
        bus.$on('toMySpace',()=>{
            console.log('MySpace');
            this.isSpace = true
            console.log(this.active);
        })
    },
    mounted () {
        console.log(this.$route);
        this.$nextTick(() => {
            this.getuser()
            let isShowImportTool = this.$readIniFile("data", "isShowImportTool");
            if (isShowImportTool && isShowImportTool === "1") {
                this.importIsShow = true;
            }
        });
    },
    methods: {
        ...mapMutations(['clearDownLoadCenter']),
        //获取用户信息
        async getuser (flag = false) {
            let sqlLib = SqlLib.getInstance(window.$DBDIR)
            let user = SqlLibUser.queryCurrentUser(sqlLib)
            if (flag) {
                this.lessonId = user.lessonId
            }
        },
        changeAuthorzation () {
            this.authorzation = true
        },
        goback (e) {
            e.stopPropagation();
            // console.log('e--------------------',e);
            let sqlLib = SqlLib.getInstance(window.$DBDIR)
            let user = SqlLibUser.queryCurrentUser(sqlLib)
            let obj = {
                bookId: user.bookId
            }
            if (this.authorzation) {
                if (user.lessonId) {
                    obj.lessonId = user.lessonId
                } else {
                    let book = SqlLibBook.queryChapterLessonByBookId(sqlLib, user.bookId)
                    if (book) {
                        obj.lessonId = book[0].lessonVO[0].id
                    }
                }
            }
            this.$router.replace({ name: 'home', params: this.authorzation ? obj : {} })
        },
        loginOut () {
            let closeTips = ''
            let downloadingTable = DownloadCenter.getInstance().getCurrentDownloadingLesson();
            if (downloadingTable.length === 0) {
                closeTips = '确认退出登录吗？'
            } else {
                closeTips = '课程资源正在下载中，是否确认退出？'
            }
            this.$dialog({
                confirm: '确认',
                cancel: '取消',
                message: closeTips,
                close: false,
                type: "warn"
            }).then(() => {
                this.$electron.ipcRenderer.send('close-all-res')
                
                //先暂停下载中心的所有下载器
                DownloadCenter.getInstance().pauseAlldownloader();
                //移除下载中心单例
                DownloadCenter.removeInstance();
                this.clearDownLoadCenter()
                localStorage.removeItem("isOffline");
                User.loginOut({}).then(response => {
                    clearInterval(window.postMessageInterval)
                    window.netStatus = false
                    localStorage.removeItem("accesstoken");
                    localStorage.removeItem("refreshToken");
                    this.$router.push({ name: 'login' });
                }).catch(error => {
                    clearInterval(window.postMessageInterval)
                    window.netStatus = false
                    localStorage.removeItem("accesstoken");
                    localStorage.removeItem("refreshToken");
                    this.$router.push({ name: 'login' });
                });
                this.$electron.ipcRenderer.send('hideSuspensionWindow')
            })
        }
    }
}
</script>

<style lang="scss">
#person {
    .person-container {
        height: calc(100vh - 64px);
        width: 100%;
        margin: 0 auto;
        border-radius: 8px;
        // padding: 30px 20px 17px 20px;
    }
    .person-content {
        flex: 1;
        width: 100%;
    }
    .person-menu {
        width: 280px;
        background: #F4F9FF;
        height: 100%;
        padding: 20px 0;
    }
    .menu-item {
        width: 280px;
        height: 40px;
        line-height: 40px;
        margin: 25px 0;
        padding-left: 32px;
        color: #303133;
        display: flex;
        align-items: center;
        img {
            width: 40px;
            height: 40px;
            margin-right: 11px;
        }
    }
    .initial {
        color: #fff;
        background: linear-gradient(270deg, #46DDFF 0%, #0085FF 100%);
    }
    .space {
        color: #fff;
        background: linear-gradient(270deg, #46DDFF 0%, #0085FF 100%);
    }
    .change {
        color: #fff;
        background: linear-gradient(270deg, #46DDFF 0%, #0085FF 100%);
    }
    .about {
        color: #fff;
        background: linear-gradient(270deg, #46DDFF 0%, #0085FF 100%);
    }
    .point {
        color: #fff;
        background: linear-gradient(270deg, #46DDFF 0%, #0085FF 100%);
    }
    .s-setting {
        color: #fff;
        background: linear-gradient(270deg, #46DDFF 0%, #0085FF 100%);
    }
    .person-message {
        flex: 1;
        background: rgb(255, 255, 255);
        height: 100%;
        border-radius: 12px 0 0 0 ;
        box-shadow: 0px -8px 8px 0px rgba(19,118,209,0.15);
    }
}
</style>
